import { Chart, MarkNode } from "@antv/g2";
export class Boxs {
    chart?: Chart;
    width: number;
    height: number
    mark?: MarkNode;
    constructor(width: string, height: string) {
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    init(id: string, title: string = '', range: string[] = ['#72cdd7', '#5087ec']) {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById(id) as HTMLElement,
            width, height,
            theme: 'classicDark'
        })
        this.chart.data([]).title({
            title, position: 'bottom', align: 'center'
        }).interval().transform({ type: 'stackY' })
            .coordinate({ type: 'theta', outerRadius: 1, innerRadius: 0.75 })
            .animate('enter', { type: 'waveIn' })
            .animate('update', { type: 'waveIn' })
            .animate('exit', { type: 'waveIn' })
            .encode('y', 'value')
            .label({ text: (d: any, i: string | number, data: any, { channel }: any) => d.name.slice(0, 2) + ':' + channel.y[i], position: 'outside' })
            .encode('color', 'name').scale('color', { range })
            .style('cursor', 'pointer').tooltip((data: { name: string, value: number }) => data.name + ':' + data.value)
        this.chart.render();
    }
    async changeData(data: any[]) {
        if (data.length === 0) {
            this.chart?.changeData([{
                name: '穿戴人次',
                value: 6
            }, {
                name: '预警人次',
                value: 5
            }])
        } else
            this.chart?.changeData(data)
    }
}